<!-- components/ImageModal.vue -->
<template>
	<view class="body">
		<view class="item">
			<view class="lable">
				姓名
			</view>
			<view class="">
				<input v-model="realName" class="input" placeholder="请输入姓名" placeholder-class="input_placeholder"
					@blur="nameBlur" @input="showRealName = false" />
				<view class="red" v-if="showRealName">
					请填写真实姓名
				</view>
			</view>
		</view>
		<view class="item">
			<view class="lable">
				身份证
			</view>
			<view class="">
				<input v-model="idCard" class="input" placeholder="请输入身份证号" placeholder-class="input_placeholder"
					@blur="IdBlur" />
				<view class="red" v-if="showIdCard">
					请填写真实身份证号
				</view>
			</view>
		</view>
		<view class="save" @click="Save">
			提交
		</view>
	</view>
</template>

<script>
	import {
		memberCheck
	} from '@/api.js'
	export default {
		props: {
			obj: {
				type: Object,
				default: {}
			},
		},
		watch: {
			obj: {
				handler(newVal) {
					this.syncData(newVal)
				},
				deep: true,
				immediate: true,
			}
		},
		data() {
			return {
				realName: '',
				showRealName: false,
				idCard: '',
				showIdCard: false,
			}
		},

		methods: {

			syncData(source) {
				this.realName = source.realName;
				this.idCard = source.idCard;
			},
			nameBlur() {
				if (!this.realName || this.realName == '') {
					this.showRealName = true
					return false
				} else {
					this.showRealName = false
					return true
				}
			},
			IdBlur() {
				console.log('this.validateIdCard(this.idCard)', this.validateIdCard(this.idCard));
				if (this.validateIdCard(this.idCard)) {
					console.log('正确');
					this.showIdCard = false
					return true
				} else {
					console.log('错误');
					this.showIdCard = true
					return false
				}
			},
			validateIdCard(id) {
				let p = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
				return p.test(id);
			},
			async Save() {
				if (this.nameBlur() && this.IdBlur()) {
					let res = await memberCheck({
						realName: this.realName,
						idCard: this.idCard
					})
					if (res.code == 200) {
						uni.showToast({
							icon: 'none',
							title: '认证成功',
							duration: 2000,
							complete() {
								setTimeout(() => {
									uni.navigateBack()
								}, 2000)
							},
						});
					}
				}

			},
		}
	}
</script>

<style scoped lang="scss">
	.body {
		background: #f8f8f8;
		height: 100vh;
		width: 100vw;
		padding: 30rpx 0;
		box-sizing: border-box;

		.item {
			display: flex;
			// align-items: center;
			width: 710rpx;
			margin: 20rpx 20rpx;
			border-bottom: 1rpx solid #ccc;
			padding: 10rpx 0;

			.lable {
				width: 110rpx;
				font-size: 28rpx;
			}

			.input {
				width: 600rpx;
				padding-left: 20rpx;
				font-size: 28rpx;
			}

			.input_placeholder {
				font-size: 28rpx;

			}

			.red {
				font-size: 26rpx;
				color: red;
				padding-left: 20rpx;
			}
		}

		.save {
			font-size: 28rpx;
			letter-spacing: 10rpx;
			width: 710rpx;
			margin: 50rpx 20rpx;
			background: #3C9CFF;
			height: 60rpx;
			color: #fff;
			line-height: 60rpx;
			text-align: center;
		}
	}
</style>